<template>
  <div class="upload-container">
    <el-card class="upload-card" v-loading="loading">
<<<<<<< HEAD

=======
      
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
      <template #header>
        <div class="card-header">
          <span>文件上传</span>
          <el-tag v-if="uploading" type="warning">上传中...</el-tag>
        </div>
      </template>

<<<<<<< HEAD

=======
      
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
      <el-upload class="upload-dragger"
          ref="uploadRef"
          v-model="fileList"
          :action="uploadUrl"
          drag
          multiple
          :limit="3"

          :on-preview="handlePreview"
          :on-remove="handleRemove"
<<<<<<< HEAD
                 :on-success="handleSuccess"
          :on-error="handleError"
          :on-progress="handleProgress"
      >


=======
      >
      
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或<em>点击选择文件</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        支持拖拽上传和点击选择，可上传多个文件
      </div>
      </el-upload>

<<<<<<< HEAD

=======
     
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
      <div class="file-list" v-if="fileList.length > 0">
        <el-table :data="fileList" stripe style="width: 100%">
          <el-table-column prop="name" label="文件名" />
          <el-table-column prop="size" label="大小" width="100">
            <template #default="scope">
              {{ formatSize(scope.row.size) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default="scope">
              <el-button type="text" @click="handlePreview(scope.row)">预览</el-button>
              <el-button type="text" @click="handleRemove(scope.row)">移除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
<<<<<<< HEAD
import { ElCard, ElTag, ElTable, ElTableColumn, ElButton, ElMessage , ElUpload } from 'element-plus';
=======
import { ElCard, ElTag, ElTable, ElTableColumn, ElButton, ElIcon, ElUpload } from 'element-plus';
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
import { UploadFilled } from '@element-plus/icons-vue'; // 引入上传图标

const fileList = ref<any[]>([]);
const uploading = ref(false);
const loading = ref(false);
const uploadUrl = ref('/api/upload'); // 替换为实际后端接口

// 文件大小格式化
const formatSize = (size: number) => {
  if (size > 1024 * 1024) {
    return `${(size / (1024 * 1024)).toFixed(2)} MB`;
  } else if (size > 1024) {
    return `${(size / 1024).toFixed(2)} KB`;
  }
  return `${size} B`;
};

// 预览文件（可扩展：调用预览组件或新窗口打开）
const handlePreview = (file: any) => {
  console.log('预览文件：', file);
  // 示例：如果是图片，可使用 el-image-preview 预览
  // ElImagePreview({ url: file.url });
};

// 移除文件
const handleRemove = (file: any, fileList?: any[]) => {
  console.log('移除文件：', file);
  // 可在此处调用后端接口删除文件
};
<<<<<<< HEAD

const handleSuccess = (response: any, file: any, fileList: any) => {
  uploading.value = false; // 上传完成，更新状态
  ElMessage.success('上传成功'); // 显示成功消息
  console.log('上传成功响应:', response); // 打印服务器响应

  // 这里可以根据服务器返回的数据更新文件列表
  // 例如，如果服务器返回了文件的URL，可以更新fileList中的数据
};

// 新增：上传失败处理函数
const handleError = (error: any, file: any, fileList: any) => {
  uploading.value = false; // 上传完成，更新状态
  ElMessage.error('上传失败: ' + error.message); // 显示错误消息
  console.error('上传失败:', error); // 打印错误信息
};

// 新增：上传进度处理函数
const handleProgress = (event: any, file: any, fileList: any) => {
  uploading.value = true; // 正在上传，更新状态
  const percentage = Math.round((event.percent || 0)); // 计算上传百分比
  console.log(`上传进度: ${percentage}%`); // 打印进度信息

  // 你可以在这里更新进度条或显示上传进度
};

=======
>>>>>>> f425cfb0320ced29f9e28f379fa4c77eebf50d68
</script>

<style scoped>
/* 容器基础样式 */
.upload-container {
  padding: 20px;
  /* 让组件居中，可根据需求调整 */
  max-width: 800px;
  margin: 0 auto;
}

/* 卡片容器 */
.upload-card {
  padding: 20px;
  border-radius: 8px;
  /* 柔和阴影，增强层次感 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 卡片头部：标题 + 上传状态标签 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.upload-dragger {
  text-align: center;
  padding: 30px 0;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  transition: border-color 0.3s ease;
}

.upload-dragger:hover {
  border-color: #409eff;
}

.el-upload__text {
  font-size: 16px;
  color: #909399;
}

.file-list {
  margin-top: 20px;
}
.card-header span {
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

/* Element Plus 上传组件自定义 */
.el-upload {
  margin-bottom: 16px;
}
.el-upload--picture-card {
  width: 120px;
  height: 120px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.el-upload--picture-card:hover {
  border-color: #409eff;
}
.el-upload-icon-plus {
  font-size: 28px;
  color: #c0c4cc;
}

/* 文件列表表格 */
.file-list {
  margin-top: 16px;
}
.el-table {
  --el-table-header-text-color: #666;
  --el-table-row-hover-bg-color: #f8f9fd;
}
.el-table th {
  font-weight: 500;
}
.el-table td {
  vertical-align: middle;
  color: #666;
}

/* 操作按钮区 */
.upload-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* 加载中状态（覆盖 Element Plus 加载样式） */
.el-card[v-loading] .el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
}

/* 上传进度条（若后续扩展可复用） */
.el-progress {
  margin-top: 8px;
}

/* 响应式适配（小屏幕下优化） */
@media (max-width: 576px) {
  .upload-card {
    padding: 16px;
  }
  .card-header span {
    font-size: 16px;
  }
  .el-upload--picture-card {
    width: 80px;
    height: 80px;
  }
}
</style>